<template>
  <div class="tabsImgBody">
    <div class="imgBodyBox">
      <div class="tabsBox">
        <!-- @tab-click="activeIdChange" -->
        <el-tabs v-model="activeId" class="tabs" @tab-click="activeIdChange">
            <el-tab-pane class="catTabs" v-for="(item,index) in categorys" :key="index" :label="item.name"
                         :name="item.uniId">
              <div slot="label">
                <div class="moreTabs" v-if="item.children?.length>0">
                  <el-dropdown trigger="hover" :hide-on-click="true">
                    <span class="el-dropdown-link" :class="currentCat==item.uniId?'is-active':''">
                      {{item.name}}<i class="icon el-icon-arrow-down el-icon--right"></i>
                    </span>
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item icon="el-icon-collection-tag" v-for="(child) in item.children" :key="child.uniId" @click.native="getProductsByCat(child.uniId,item.uniId)">{{child.name}}</el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>
                </div>
                <div class="singleTabs" v-else @click="getProductsByCat(item.uniId)"><!-- {{item.name}} --></div>
              </div>
            </el-tab-pane>
        </el-tabs>
        
      </div>

      <div class="tabsList" :class="products?.length<4?'flexLeft':''">
      
        <el-col class="pro_card body-col"  :span="6" v-for="(item,index) in products" :key="index">
          <el-card class="col-card pane-box" :body-style="{ padding: '10px'}" shadow="hover">
            <img :alt="'新盛合环保设备,玻璃钢'" v-if="!item.picList" :src="defImg" class="cardImg pane-img img-responsive">
            <!-- <img class="imgCode" :alt="'新盛合环保'+','+(leaders && leaders[0].name?leaders[0].name:'')" :src="defaultImg"> -->
            <!--<img v-if="item.picList" :src="item.picList[0]" class="image">-->
            <img :alt="item.seoKeyword.toString()" v-if="item.picList" :src="item.picList[0]" class="cardImg pane-img img-responsive">
            <div >
              <span class="proDesc">{{item.name}}</span>
              <div class="bottom clearfix">
                <time class="time">{{item.seoDescription}}</time>
              </div>
            </div>
            <el-button type="text" class="pro_card_to button" @click="inDetail(item)">查看详情</el-button>
            <ClientOnly>
              <div class="bottomTimer">
                <div class="leftTitle">
                  <span style="--o:1">8</span>
                  <span style="--o:2">1</span>
                  <span style="--o:3">8</span>
                  <span style="--o:4">特</span>
                  <span style="--o:5">惠</span>
                </div>
                <div class="timeDesc">倒计时</div>
                <div class="timeContent">
                  <CommonCountDown  :time="$getCurrentTimePlus()" @timeEnd="timeEnd"/>
                </div>
              </div>
            </ClientOnly>
            
          </el-card>
        </el-col>
      </div>
    </div>
  </div>
</template>

<script setup>


import { throwError } from 'element-plus/es/utils/error.mjs';

const $emit=defineEmits()

// const props=defineProps({
//   allCats:{
//     type:Array,
//     default:()=>[]
//   }
// })

// watchEffect(() => {
//   console.log(`Message changed to: ${props.allCats}`)
// })

// watch(()=>props.allCats,()=>{
//   console.log("子组件：接受categorys",props.allCats)

// })

let categorys=[{uniId:''}]
// console.log("产品分类页categorys",categorys)
let currentCat=ref('')
let activeId=ref('')
let products=ref([])

let {data,error}=await GetProductCats('CatAll','/business/client/product/catAll',{lazy:true})

// let {data,error}= await useFetch('/business/client/product/catAll',{
//     baseURL:'http://39.104.21.39:8899',
//     query: {
//       // domain:'www.xinshenghe999.com'
//     },
//     key:'CatAll',
//     headers:{
//       'Content-Type': 'application/json',
//       'domain':'www.xinshenghe999.com'
//     },
//     server:true,
//     lazy:true,
//     //响应数据接收
//     transform: (res) => {
//       // console.log('res-------',res)
//       return res.responseData
//     }
//   })

  if(process.server && error.value){

    throwError((error.value?.data,error.value?.data.error+': '+error.value?.data.status),'页面加载失败，请联系客服！')
  }
  
  if(data.value?.length>0){
    // console.log("data---：",data)
    //避免延迟加载实用美观computed
    // categorys = computed(()=>data.value) 
    categorys=data.value
    // categorys.push(
    //   {children: [],
    //     domainId: "mvleCQEw",
    //     isShow: 1,
    //     level: 1,
    //     moduleId: "kXWOJRdn",
    //     name: "玻璃钢化粪池",
    //     parentId: "00000000",
    //     productCount: null,
    //     productUnit: null,
    //     sort: 1,
    //     uniId: "TXw8AHS4"}
    // )
    activeId.value=categorys[0].uniId
    // console.log("产品nav导航cats：",categorys)
    if(categorys[0].children?.length>0){
       currentCat.value=categorys[0].children[0].uniId
     }else{
       currentCat.value=categorys[0].uniId
     }

     getProductsByCat(currentCat.value)
    //  console.log("currentCat：",currentCat)
    
  }

  
async function getProductsByCat(uniId,parentId){
  // console.log("uniId----: ",uniId)
  let {data,error}= await GetProductListById(
    {
      body: JSON.stringify({
        categoryId: uniId,
        status: 'P',
        currentPage: 1,
        size: 4,
      }),
      method: 'POST',
      lazy:true,
    }
  )
  // let {data,error}= await useFetch('/business/client/product/productByCatId',{
  //   baseURL:'http://39.104.21.39:8899',
  //   // query: {
  //   //   categoryId: uniId,
  //   //   status: 'P',
  //   //   currentPage: 1,
  //   //   size: 4,
  //   // },
  //   method: 'POST',
  //   body: JSON.stringify({
  //     categoryId: uniId,
  //     status: 'P',
  //     currentPage: 1,
  //     size: 4,
  //   }) ,
  //   key:'MainProductList',
  //   headers:{
  //     'Content-Type': 'application/json',
  //     'domain':'www.xinshenghe999.com'
  //   },
  //   // server:false,
  //   lazy:true,
  //   //响应数据接收
  //   transform: (res) => {
  //     // console.log('res-------',res)
  //     return res.responseData
  //   }
  // })

  if(data?.value){
    // console.log("产品列表data：",data.value)
    products.value=data.value.listPageData
  }
  
  // console.log("产品列表：",products)
}

function activeIdChange(tab, event){
  // console.log("tab----",tab,tab.paneName)
  // console.log("event----",event)
  getProductsByCat(tab.paneName)
}

function inDetail(item){
  console.log("inDetail",item)
}

function timeEnd(){
  console.log("timeEnd")
}


</script>

<style lang="scss" scoped>
@import '@/assets/css/index.scss';
@import '@/assets/css/common.scss';


.tabsImgBody{
  margin-top: 20px;
  padding-top: 10px;
  position: relative;
  z-index: 0;
  clear: both; /*clear取消默认继承上一级标签属性*/
  background-color: #eee;
}
.imgBodyBox{
  width: 69%;
  margin: auto;
}
.tabsBox{
  .tabs{
    .catTabs{
        padding: 0 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        .moreTabs{
          .el-dropdown-link{
            .icon{

            }
          }
          .el-icon-collection-tag{

          }
        }
      .singleTabs{

      }
    }
  }
}
.flexLeft{
  justify-content: flex-start !important;
}
.tabsList{
  display: flex;
  align-items: center;
  width: 102%;
  justify-content: center;
  flex-wrap: wrap;
  
  :deep(.el-col-6){
      flex: none !important;
    } 
  .bottom {
    margin-top: 10px;
    margin-bottom: 10px;
    .time {
      font-size: 13px;
      color: #999;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;

    }
  }
  .clearfix{
    width: 100%;
    display: flex;
    &:before,&:after {
      display: table;
      content: "";
    }
    &:after {
      clear: both
    }
  }


  
  .pro_card{
    // margin-right: 15px;
    margin-right: 10px;
    &:nth-child(4n){
      margin-right: 0;
    }
    .col-card{
      max-width: 310px;
      // padding-bottom: 10px;
      .cardImg{
        width: 100%;
        border-radius: 10px;
        height: 270px;
      }
    }
    .proDesc{
      color: #006497;
      font-weight: 700;
      text-align: center;
      align-items: center;
      display: flex;
      font-size: 16px;
      padding-top: 13px;
      justify-content: center;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }

  .button {
    float: right;
  }
  .pro_card_to {
    cursor: pointer;
    display: flex;
    width: 100%;
    // margin-top: 10px;
    // margin-bottom: 10px;
    // padding: 10px;
    color: #ffffff;
    background-color: #e92322;

    text-align: center;
    line-height: unset;
    align-items: center;
    font-size: 16px;
    &:hover,&:focus {
      background-color: rgba(159, 2, 1, 1);
    }

    
  }
}

.bottomTimer {
  max-width: 300px;
  display: flex;
  // background-color: coral;
  // margin-left: -10px;
  padding: 10px 10px 10px 10px;
  // margin-top: 10px;
  align-items: center;
  justify-content: start;
  cursor: pointer;
  .leftTitle {
    color: transparent;
    font-size: 16px;
    font-family: 'fangzhengFont', sans-serif;//FZHanZhenGuangBiaoS-GB
    background-color: rgba(245, 237, 123, 0.3);
    padding: 3px 10px;
    border-radius: 8px;
    display: flex;
    // border-top-right-radius: 10px;
    // border-bottom-left-radius: 10px;
    span{
      animation: letterColor 3s linear infinite;
      /* 计算每个字的动画起始时间 */
      animation-delay: calc(0.1s * var(--o));
    }
    span:nth-child(4){
      margin-left: 2px;
    }
  }
  .timeDesc{
    display: flex;
    white-space: nowrap;
    margin: 0 3px;
    color: #aaa;
    font-size: 14px;
    word-wrap: wrap;
    // font-family: 'fangzhengFont', sans-serif;//FZHanZhenGuangBiaoS-GB
  } 
  .timeContent{

  }
}




:deep(.is-active) {
  color: #e92322 !important;
}
:deep(.el-dropdown) {
  font-size: 18px;
}
:deep(.el-tabs__nav-wrap) {
  display: flex;
  align-items: center;
  padding: 0 30px;
}
:deep(.el-tabs__active-bar) {
  background-color: #e92322 !important;
}
:deep(.el-tabs__item) {
  font-size: 18px !important;
}

:deep(.el-tabs__nav-wrap.is-scrollable) {
  padding: 0 30px;
}
:deep(.el-tabs__nav-next), :deep(.el-tabs__nav-prev) {
  color: #e92322;/*#1684F0*/
  background: #f8f7f1;
  font-size: 30px;
  line-height: 40px;
  padding-right: 10px;
  margin-top: 10px;
}
:deep(.el-card) {
  margin-top: 10px;
  margin-bottom: 10px;
}
//添加倒计时去除默认底部的padding
:deep(.el-card__body) {
  padding-bottom: 0 !important;
}

</style>